<template>
  <div style="display: inline-block;width:100%">
    <el-select v-model="stuid" filterable reserve-keyword placeholder="请选择学生" :filter-method="dataFilter"
      @change="change" clearable :disabled='disabled'>
      <el-option v-for="item in StuOptions" :key="item.stuid" :label="item.name + ' '+ item.phone" :value="item.stuid">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { findStudents } from "@/api/user";
export default {
  name: 'checkStu',
  props: {
    itemId: {
      type: [String, Number],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      stuid: '',
      StuOptions: [],
      StuOptionsCopy: [],
    }
  },
  watch: {
    itemId(n) {
      this.stuid = this.itemId
    }
  },
  mounted() {
    this.stuid = this.itemId
    this.getStuid()
  },
  methods: {
    change(val) {
      this.$emit('checkedItem', val)
    },
    async getStuid() {
      const res = await findStudents.post({ pageNum: 1, pageSize: 3000 });
      if (res.resultCode === "000000") {
        this.StuOptions = res.data.studentList;
        this.StuOptionsCopy = res.data.studentList;
      } else {
        this.$message.error(res.resultInfo)
      }
    },
    dataFilter(val) {
      if (val) { //val存在
        this.StuOptions = this.StuOptionsCopy.filter((item) => {
          if (item.name.indexOf(val) > -1 || item.phone.indexOf(val) > -1) {
            return true
          }
        })
      } else { //val为空时，还原数组
        this.StuOptions = this.StuOptionsCopy;
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>